<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <jsp:include page="../head.jsp"></jsp:include>
    <script src="/static/js/qrcode.js"></script>
    <style>
        .layui-table-cell{
            height:36px;
            line-height: 36px;
        }

        .head{
            margin: 10px auto;
            background: white;
            padding: 20px 20px 20px 20px;
            box-shadow: 0px 0px 5px darkgrey;
            max-width: 1200px;
        }

        .main{
            max-width: 1200px;
            margin: 10px auto;
            background: white;
            padding: 10px 20px 10px 20px;
        }

        .dialog{
            position: absolute;
            bottom: 0;
            right: 0;
            left: 0;
            top: 0;
            overflow-y: scroll;
            background-color: rgba(0,0,0,0.3);
            z-index: 998;
            padding-top: 100px;
            display: none;
        }

        .content{
            padding: 20px 100px;
            background-color: white;
            min-height: 600px;
            max-width: 900px;
            margin: 0 auto;
        }

        table,table tr th, table tr td { border:1px solid #5a5a5a; }
        .bill-table{
            width: 100%;
            min-height: 35px;
            line-height: 35px;
            text-align: center;
            border-collapse: collapse;
        }

        .bill-head{
            font-size: 16px;
            border-top: 1px gray dashed;
            padding: 10px 0;
        }
        .head-content > div{
            margin: 5px 0;
        }
        .bill-body{
            border-bottom: 1px gray dashed;
            padding: 10px 0;
        }

        .bill-footer{
            text-align: center;
        }

        .imgs{
            display: flex;
            padding: 10px;
            border: 1px solid #000000;
        }
        .img-item{
            width: 80px;
            height: 80px;
            margin: 10px;
            border: 1px solid gray;
        }
        .img-item img,.img-view img{
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
        }
        .img-view{
            position: absolute;
            bottom: 0;
            right: 0;
            left: 0;
            top: 0;
            overflow-y: scroll;
            background-color: rgba(0,0,0,0.3);
            z-index: 999;
            display: none;
        }

        .img-view div{
            width: 100%;
            height: 100%;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="dialog"></div>
<div class="img-view">
    <div><img class="preview-img" src="" alt=""></div>
</div>

<div class="container head">
    <form action="" class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">日期：</label>
            <div class="layui-inline">
                <input type="text" id="startDate" name="startDate" placeholder="请输入起始日期" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-inline"><span>-</span></div>
            <div class="layui-inline">
                <input type="text" id="endDate" name="endDate" placeholder="请输入起始日期" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">进度：</label>
            <div class="layui-input-block">
                <input type="checkbox" name="progress" value="1"  title="财务审核中">
                <input type="checkbox" name="progress" value="2"  title="处长审核中">
                <input type="checkbox" name="progress" value="3"  title="完成">
                <input type="checkbox" name="progress" value="0"  title="驳回">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-inline">
                <button class="layui-btn" lay-submit lay-filter="searchBtn" style="margin-left: 50px">搜索</button>
            </div>
        </div>
    </form>
</div>

<div class="container main">
    <table class="layui-hide" id="bill" lay-filter="bill"></table>
</div>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="detail">详情</button>
    </div>
</script>

<script type="text/html" id="daily-html">
    <div class="content  layui-container">
        <div class="bill-head">
            <div class="layui-row">
                <div class="layui-col-md6 nor-text-1 head-content">
                    <div class="layui-row">
                        <div class="layui-col-md3">编号：</div><div class="layui-col-md9"><span id="code">12323asd</span></div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md3">申请日期：</div><div class="layui-col-md9"><span id="createTime">12323asd</span></div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md3">部门：</div><div class="layui-col-md9"><span id="deptName">12323asd</span></div>
                    </div>
                </div>
                <div class="layui-col-md6" style="text-align: right;padding-right: 20px">
                    <div id="qrcode" style="width:80px; height:80px;display: inline-block"></div>
                </div>
            </div>
        </div>
        <div class="bill-body">
            <table class="bill-table nor-text-2">
                <thead>
                    <tr>
                        <th width="30%">项目</th>
                        <th width="50%">说明</th>
                        <th width="20%">金额</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="total" style="height: 50px;color: #4E5465">
                        <td colspan="2"></td>
                        <td >合计￥：1001252</td>
                    </tr>
                </tbody>
            </table>
            <div class="imgs">
            </div>
        </div>
        <div class="bill-footer">
            <p class="nor-text-3">财务相关人员审核签字</p>
            <table class="bill-table nor-text-2">
                <tr style="height: 80px">
                    <td width="20%">财务审核：</td>
                    <td width="30%" id="cw"></td>
                    <td width="20%">财务处长审核：</td>
                    <td width="30%" id="cz"></td>
                </tr>
            </table>
            <p class="nor-text-3" style="margin-top: 5px;font-size: 14px">
                <b>温馨提示：此单报销金额以财务核定金额为准，报销遵循财务相关规定</b>
            </p>

            <div class="btns" style="text-align: center;padding: 20px">
                <button class="layui-btn layui-btn-normal" id="sureBtn" data-billid="">通过</button>
                <button class="layui-btn layui-btn-warm" id="cancelBtn" data-billid="">驳回</button>
            </div>
        </div>
    </div>
</script>

<script src="/static/layui/layui.js"></script>
<script>
    layui.use(['table','form'], function(){
        var table = layui.table;
        var form = layui.form;
        var billArr = [];

        initTable();

        form.on('submit(searchBtn)', function(data){
            search(data.field)
            return false;
        })


        //监听工具条
        table.on('tool(bill)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event;
            console.log(data)
            if(layEvent === 'detail'){
                var billId = data.billId;
                if(data.category=='日常报销'){
                    initDailyBill(data);
                }else if(data.category=='国内差旅报销'){
                    initBusinessBill(data);
                }
            }
        });

        // 账单预览关闭
        $('.dialog').click(function (e) {
            var elem = $(e.target)
            if(elem.hasClass('dialog')){
                elem.children().remove()
                elem.css('display','none')
            }
        })
        // 账单票据预览关闭
        $('.img-view').click(function (e) {
            var elem = $(e.target)
            if(!elem.hasClass('preview-img')){
                $('.img-view').css('display','none')
            }
        })
        // 日常报销预览窗口
        function initDailyBill(obj) {
            $('.dialog').css('display','block')
            $('.dialog').height($(document).height())

            var daily_root = $($('#daily-html').html())
            daily_root.find('#code').text(obj.code)
            daily_root.find('#createTime').text(obj.createTime)
            daily_root.find('#deptName').text(obj.code)
            daily_root.find('#total td').last().text('合计￥:' + obj.total)
            // 二维码
            var qrcode = new QRCode(daily_root.find('#qrcode')[0], {width : 80, height : 80});
            qrcode.makeCode(obj.code+';'+obj.createTime);
            // 报账内容
            obj.dailys.forEach(function (daily) {
                var tr = $('<tr>' +
                    '<td>'+daily.dailyName+'</td>' +
                    '<td>'+daily.remark+'</td>' +
                    '<td>'+daily.acount+'</td>' +
                    '</tr>')
                daily_root.find('#total').before(tr)
            })
            // 票据
            obj.imgs.forEach(function (imgItem) {
                var img = $('<div class="img-item"><img src="'+imgItem+'" alt=""></div>')
                img.click(function () {
                    showImg(imgItem)
                }) // 图片预览监听
                daily_root.find('.imgs').append(img)
            })
            // 给按钮绑定账单id
            daily_root.find('.btns button').attr('data-billid',obj.billId);
            $('.dialog').append(daily_root)
        }
        // 差旅报销
        function initBusinessBill(obj) {
            $('.dialog').css('display','block')
            $('.dialog').height($(document).height())

            var daily_root = $($('#daily-html').html())
            daily_root.find('#code').text(obj.code)
            daily_root.find('#createTime').text(obj.createTime)
            daily_root.find('#deptName').text(obj.code)
            // 二维码
            var qrcode = new QRCode(daily_root.find('#qrcode')[0], {width : 80,height : 80});
            qrcode.makeCode(obj.code+';'+obj.createTime);

            // 票据
            obj.imgs.forEach(function (imgItem) {
                var img = $('<div class="img-item"><img src="'+imgItem+'" alt=""></div>')
                img.click(function () {
                    showImg(imgItem)
                }) // 图片预览监听
                daily_root.find('.imgs').append(img)
            });
            $('.dialog').append(daily_root)
        }
        // 显示账单票据预览
        function showImg(src) {
            $(".img-view").css('display','block')
            $(".img-view div").width($(window).width())
            $(".img-view div").height($(window).height())
            $(".img-view img").attr('src',src);
        }
        // 更新
        function update(deptData,flag) {

        }

        function search(searchDta){
            table.reload('dept', {
                url: '/dept/search'
                ,where:searchDta
                ,page: {
                    curr: 1
                }
            });
        }

        function initTable(){
            table.render({
                elem: '#bill'
                ,url:'/billInfo/commited/list'
                ,cols: [[
                    {field:'code', width:150, title: '账单编码', sort: true}
                    ,{field:'category', width:120, title: '报销种类'}
                    ,{field:'total', width:120, title: '金额'}
                    ,{field:'progress', width:150,title: '进度', align:'center',templet:function (d) {
                          return '<span class="layui-badge '+d.iconType+'">'+d.progress+'</span>';
                        }}
                    ,{field:'createTime',width:150, title: '申请时间'}
                    ,{field:'remark', title: '备注'}
                    ,{fixed: 'right', title:'操作', align:'center', toolbar: '#toolbar', width:100}
                ]]
                ,page: true
                ,done: function (res) {
                    billArr = res.data
                    console.log(billArr)
                }
            });
        }

        function reloadTable() {
            table.reload('bill', {
                url: '/billInfo/commited/list',
                done:function (res) {
                    billArr = res.dara
                }
            });
        }
    });
</script>
</body>
</html>
